<template>
	<view class="">
		<u-navbar title="提醒" :background="background" back-icon-color="#333333" back-icon-size="40"
			title-color="#333333" title-size="36" :title-bold="true">
			<view slot="right" class="slot-right">
				保存
			</view>
		</u-navbar>
		<view class="flex-col page">
			<view class="flex-col flex-1 group_2">
				
				<view class="clock flex-row justify-center items-center relative" style="margin-bottom: 84rpx;margin-top: 110rpx;padding: 0 40rpx;">
					<picker-view indicator-class="picker-indicator" :indicator-style="indicatorStyle" :value="hourValue" @change="bindChangeHour"
						class="picker-view" style=" ">
						<picker-view-column>
							<view class="item" style="text-align: end;" v-for="(item,index) in hours" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
					<picker-view indicator-class="picker-indicator3" :indicator-style="indicatorStyle3" class="picker-view3">
						<picker-view-column>
							<view class="maohao flex-row justify-center items-center">:</view>
						</picker-view-column>
					</picker-view>
					<picker-view indicator-class="picker-indicator1" :indicator-style="indicatorStyle1" :value="minsValue" @change="bindChangeMin"
						class="picker-view1">
						<picker-view-column>
							<view class="item1" style="text-align: start;" v-for="(item,index) in mins" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
					
				</view>
				<view class="flex-col section_2">
					<view @click="openRepeat" class="flex-row justify-between items-center">
						<text class="font_3">重复</text>
						<view class="flex-row items-center group_6">
							<text class="font_4">{{repeatValue != '' ? repeatValue : '永不'}}</text>
							<image class="shrink-0 image_3 ml-9"
								src="/static/jihua_arrow_right_gray.png" />
						</view>
						<u-picker mode="selector" :default-selector="[0]" :range="repeatSelector" range-key="name" v-model="repeatShow"
							@confirm="confirmRepeat"></u-picker>
					</view>
					<view class="flex-col group_7">
						<text class="font_5">内容</text>
						<!-- <view class="flex-row items-center group_8"> -->
							<textarea class="group_8" placeholder="请输入提醒内容"></textarea>
						<!-- </view> -->
					</view>
					
				</view>
				<view class="flex-col justify-start items-center button_2 text-wrapper_2">
					<text class="text_10">删除闹钟</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	
	export default {
		data() {
			
			const hours = []
			const mins = []
			for (let i = 0; i <= 23; i++) {
				if(i<10){
					hours.push('0'+i)
				}else {
					hours.push(i)
				}
				
			}
			for (let i = 0; i <= 59; i++) {
				if(i<10){
					mins.push('0'+i)
				}else {
					mins.push(i)
				}
			}
			
			return {
				background: {
					backgroundColor: '#f0f5ff',
				},
				
				visible: true,
// 				indicatorStyle: `width: 397rpx;
// height: 102rpx;
// border-radius: 16rpx;
// background: rgba(0, 0, 0, 0);
// box-shadow: 0 0 35rpx 11rpx #b8cbf840;`,
				indicatorStyle: `width: 90%;
				height: 102rpx;
				border-radius: 16rpx 0 0 16rpx;
				background: rgba(0, 0, 0, 0);
				box-shadow: 0 0 35rpx 11rpx #b8cbf840;
				margin-left: 20rpx;
				`,
				indicatorStyle1: `width: 90%;
				height: 102rpx;
				border-radius: 0 16rpx 16rpx 0;
				background: rgba(0, 0, 0, 0);
				box-shadow: 0 0 35rpx 11rpx #b8cbf840;
				margin-right: 20rpx;
				`,
				indicatorStyle3: `width: 100%;
				height: 102rpx;
				
				background: rgba(0, 0, 0, 0);
				box-shadow: 0 0 35rpx 11rpx #b8cbf840;
				margin-right: 20rpx;
				`,
				hours,
				mins,
				switchValue: false,
				repeatShow: false,
				repeatSelector: [
					{
						name: '111',
						id: 1
					},
					{
						name: '222',
						id: 2
					},
					{
						name: '333',
						id: 3
					}
				],
				repeatValue: '',
				pickerValue: [],
				hourValue: [],
				minsValue: []
			}
		},
		onLoad() {
			
		},
		methods: {
			
			bindChangeHour(e){
				console.log(e.detail.value,'bindChangeHour')
			},
			bindChangeMin(e){
				console.log(e.detail.value,'bindChangeMin')
			},
			openRepeat(){
				this.repeatShow = true
			},
			confirmRepeat(e){
				console.log(e,'eee')
				let index = e[0]
				this.repeatValue = this.repeatSelector[0].name
			},
			
			closeTeamPopup() {
				this.$emit('getIsShow', false)
			},
			bindChange: function(e) {
				this.teamValue = this.dataList[e.detail.value[0]];
				// this.$emit('getVal', this.teamValue ? this.teamValue : this.dataList[0]);
				this.currentTeamPick = e.detail.value[0];
			},
			confirmTeam() {
				this.teamValue = this.dataList[this.currentTeamPick];

				this.closeTeamPopup();
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .select-view {
	// 	width: 397rpx;
	// 	height: 102rpx;
	// 	border-radius: 16rpx;
	// 	background: #eff5fe;
	// 	box-shadow: 0 0 35rpx 11rpx #b8cbf840;
	// 	position: absolute;
	// }
	.maohao {
		width: 100rpx;
		height: 106rpx;
		width: 100%;
		// background: rgba(0, 0, 0, 0);
		// background-color: #f1f5fe;
		background-color: #eff5fe;;
		// box-shadow: 0 0 35rpx 11rpx #b8cbf840;
		// box-shadow: 0 -35rpx #b8cbf840;
		// box-shadow: 0 -10px 20px #b8cbf840, 0 10px 20px #b8cbf840;
		// box-shadow: 0px 24rpx #e9effc,0px 0px green,0px -25rpx #e9effc;
		// box-shadow: 0 0 20px 0 red;
		
		// position: relative;
		// box-shadow: 0 0 35rpx 11rpx #b8cbf840;
	}
	// .maohao::before,  
	//   .maohao::after {  
	//     content: "";  
	//     position: absolute;  
	//     left: 0;  
	//     right: 0;  
	//     // z-index: -1;  
	//   }  
	  
	//   .maohao::before {  
	//     top: 0;  
	//     height: 10px; /* 阴影的高度 */  
	//     background: linear-gradient(to bottom, #b8cbf840);  
	//   }  
	  
	//   .maohao::after {  
	//     bottom: 0;  
	//     height: 10px; /* 阴影的高度 */  
	//     background: linear-gradient(to top, #b8cbf840);  
	//   }  
	
	
	
	
	/deep/ .clock .picker-view {
		// width: 397rpx !important;
		width: 150rpx !important;
		height: 257rpx !important;
	}
	/deep/ .clock .picker-view3 {
		// width: 397rpx !important;
		width: 150rpx !important;
		height: 257rpx !important;
	}
	/deep/ .clock .uni-picker-view-mask {
		background-color: rgba(0, 0, 0, 0) !important;
		background: rgba(0, 0, 0, 0);
		width: 150rpx !important;
	}
	/deep/ .clock .uni-picker-view-content {
		text-align: center;
		line-height: 102rpx;
		width: 150rpx !important;
		font-weight: 500;
		font-size: 64rpx;
		color: #171832;
	}
	/deep/ .clock .picker-indicator {
		// width: 397rpx;
		width: 150rpx;
		height: 102rpx;
		
		background: #eff5fe;
		box-shadow: 0 0 35rpx 11rpx #b8cbf840;
	}
	/deep/ .clock .picker-view1 {
		// width: 397rpx !important;
		width: 150rpx !important;
		height: 257rpx !important;
	}
	// /deep/ .clock .uni-picker-view-mask {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// 	background: rgba(0, 0, 0, 0);
	// 	width: 150rpx !important;
	// }
	// /deep/ .clock .uni-picker-view-content {
	// 	text-align: center;
	// 	line-height: 102rpx;
	// 	width: 150rpx !important;
	// 	font-weight: 500;
	// 	font-size: 64rpx;
	// 	color: #171832;
	// }
	// /deep/ .clock .picker-indicator {
	// 	// width: 397rpx;
	// 	width: 150rpx;
	// 	height: 102rpx;
		
	// 	background: #eff5fe;
	// 	box-shadow: 0 0 35rpx 11rpx #b8cbf840;
	// }
	
</style>
<style>
	@import url('../../common/css/common.css');

	.ml-15-5 {
		margin-left: 31rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-8-5 {
		margin-left: 17rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	page {
		background-color: #f0f5ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.slot-right {
		width: 102rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 28rpx;
		background: linear-gradient(90deg, #d7d6ff, #c4e5fc);
		margin-right: 33rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #1C335C;
	}

	.font {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.group_2 {
		padding: 0 30rpx 266rpx;
		overflow-y: auto;
	}

	.group_3 {
		padding: 64rpx 146rpx;
	}

	.group_4 {
		padding: 17rpx 88rpx;
	}

	.font_2 {
		font-size: 64rpx;
		font-family: PingFang SC;
		line-height: 48rpx;
		font-weight: 500;
		color: #b2b3bd;
	}

	.text_3 {
		margin-right: 5rpx;
	}

	.section {
		padding: 25rpx 0;
		background-color: #eff5fe;
		box-shadow: 0rpx 0rpx 34.96rpx 11.04rpx #b8cbf840;
		border-radius: 16rpx;
		border-left: solid 2rpx #ffffff;
		border-right: solid 2rpx #ffffff;
		border-top: solid 2rpx #ffffff;
		border-bottom: solid 2rpx #ffffff;
	}

	.text_4 {
		color: #171832;
	}

	.text_6 {
		margin-top: 22rpx;
		color: #171832;
		line-height: 19rpx;
	}

	.text_5 {
		color: #171832;
		font-size: 64rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 46rpx;
	}

	.group_5 {
		padding: 20rpx 88rpx;
	}

	.text_7 {
		margin-right: 5rpx;
		line-height: 47rpx;
	}

	.section_2 {
		margin: 0 10rpx;
		padding: 44rpx 36rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		font-weight: 600;
		color: #171832;
	}

	.group_6 {
		margin-right: 8rpx;
	}

	.font_4 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		color: #616274;
	}

	.image_3 {
		width: 10rpx;
		height: 17rpx;
	}

	.group_7 {
		margin-top: 60rpx;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		/* line-height: 25rpx; */
		font-weight: 600;
		color: #171832;
	}

	.text_8 {
		line-height: 26rpx;
	}

	.group_8 {
		margin-right: 8rpx;
		width: 540rpx;
		height: 225rpx;
		border-radius: 8rpx;
		background: #f9fbff;
		padding: 46rpx 35rpx 20rpx;
		margin-top: 32rpx;
		
	}

	.group_9 {
		margin-top: 88rpx;
	}

	.group_10 {
		margin-right: 6rpx;
	}

	.group_11 {
		margin-top: 77rpx;
	}

	.text_9 {
		line-height: 26rpx;
	}

	.switch {
		box-shadow: 0rpx 9rpx 14.56rpx 1.44rpx #b2b9c236;
		border-radius: 25rpx;
		width: 108rpx;
		height: 50rpx;
	}

	.button_2 {
		margin-top: 227rpx;
	}

	.text-wrapper_2 {
		padding: 28rpx 0;
		background-color: #ffffff;
		border-radius: 44rpx;
	}

	.text_10 {
		color: #fe5656;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
		letter-spacing: 1.6rpx;
	}


	.picker-view {
		width: 750rpx;
		height: 600rpx;
		/* margin-top: 20rpx; */
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>